<!-- HTML标签-用<template></template>标签装HTML标签 -->
<template>
    <div class="app">
        <h1>Hello World</h1>
        <Person/>   <!-- 3、设置要将子组件放在什么位置。-->
        <h1>Hello Vue3</h1>
    </div>
    <Student/>

</template>

<!-- JavaScript脚本或typeScrpit脚本 ，用<script></script> 装js或ts脚本-->
 <!-- lang='ts' 声明当前脚本是使用TypeScript完成的 -->



<script lang="ts">
    //1、引入子组件
    import Person from './components/Person.vue'
    import Student from './components/Student.vue'
    // 把自己暴露出来
    export default{
        name:'App',  //给自己取个组件名称。
        components:{Person,Student} //2、使用子组件
    }
</script>





<!-- css样式 ，用<style></style>标签装css样式-->
<style>
    /* 类选择器 */
    .app{
        background-color: beige;    /*背景颜色 */
        padding: 30px; /*内边距 */
        box-shadow: 0 0 10px; /*边框阴影 */
        border-radius: 10px;
    }
</style>